<template>
  <div>
    <swiper :list="baseList" auto></swiper>
    <div class="product">
      <div class="product_list">
        <div class="title clear">
          <span class="fl">
                      <span class="mr8">/<b>热门产品</b>/</span> 人人都在抢的货</span>
          <span class="fr" id="changeGoods">
      不喜欢? <i class="button" id="aaaa" v-on:click="hotProducts()" >换一组</i>
      </span>
        </div>
  
        <div class="product_detail overf">
          <div class="fl">
            <div id="secKill_a0" class="fldd">
  
            </div>
          </div>
          <div class="fr">
            <div id="secKill_a1" class="over">
            </div>
            <div id="secKill_a2">
  
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <div class="gray-text">
      <span class="gray-layout">
      <span class="gray-text-img"></span> 为您推荐
      </span>
    </div>
    <scroller lock-x scrollbar-y use-pullup :pullup-config="pullupConfig2" height="1200px" ref="demo2" @on-pullup-loading="load2">
      <div class="love-content" id="love-content">
        <div class="love-item" v-for="item in items">
          <a href="goods.html">
            <img :src="item.img" class="imgg">
            <p class="line-num1 ng-binding">{{item.content}}</p>
          </a>
          <div class="love-price">
            <span>价格:</span> <i class="ng-binding">{{item.shop_price}}</i>
          </div>
        </div>
  
      </div>
    </scroller>
  </div>
</template>

<script>
  import {
    XHeader,
    Swiper,
    SwiperItem,
    Scroller
  } from 'vux'
  import {
    getQueryString,
    BATE
  } from './common.js'
  export default {
    components: {
      XHeader,
      Swiper,
      SwiperItem,
      Scroller
    },
    data () {
      return {
        pullStatus: {
          up: 'default'
        },
        baseList: [],
        hotProduct: [],
        page: 1,
        page2: 1,
        items: [],
        BATE: BATE,
        codeV: getQueryString('code'),
        pullupConfig2: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        }
      }
    },
    methods: {
      load2 (that) {
        var qs = require('qs')
        this.$http.post(this.BATE + '/api/recommendProduct', qs.stringify({
          code: this.codeV,
          page: this.page2
        })).then(response => {
          let recommendProduct = response.data.ret_data
          if (this.page2 <= recommendProduct.PageAll) {
            this.items = this.items.concat(response.data.ret_data.data)
            ++this.page2
            setTimeout(() => {
              // this.$broadcast('pullup:reset', uuid)
              this.$refs.demo2.donePullup()
            }, 10)
          } else {
            this.$refs.demo2.disablePullup()
          }
        })
      },
      hotProducts: function () {
        var qs = require('qs')
        this.$http.post(this.BATE + '/api/hotSaleProduct', qs.stringify({
          code: this.codeV,
          page: this.page
        })).then(response => {
          let hotProduct = response.data.ret_data
          if (this.page <= hotProduct.PageAll) {
            ++this.page
            for (var i = 0; i < hotProduct.data.length; i++) {
              var text = '<a href="javascript:;"  goods-id="' + hotProduct.data[i].product_id + '">' +
                '<dl class="clear">' +
                '<dt><p><img src="' + hotProduct.data[i].img + '"></p></dt>' +
                '<dd>' +
                '<p class="texttitle txt">' + hotProduct.data[i].content + '</p>' +
                '<p class="textvalue"><span>￥' + hotProduct.data[i].shop_price + '</span></p>' +
                '</dd>' +
                '</dl>' +
                '</a>'
              document.querySelector('#secKill_a' + i).innerHTML = text
            }
          } else {
            this.page = 1
          }
        })
          .catch(function (response) {
            console.log(response)
          })
      }
    },
    mounted () {
      this.$nextTick(function () {
        document.querySelectorAll('.imgg')[2].height = '137px'
      })
    },
    created () {
      this.load2()
      this.hotProducts()
      this.$http.get('http://app.sanjiang.com/sales').then(response => {
        this.baseList = response.data.data
      })
        .catch(function (response) {
          console.log(response)
        })
    }
  }
</script>

<style scoped>
  @import 'base.css'
</style>
